<template>
    <div class="win_action_form">
        <ul class="">
            <li><i class="iconfont">&#xe650;</i></li>
            <li><i class="iconfont">&#xe621;</i></li>
            <li><i class="iconfont">&#xe786;</i></li>
        </ul>
    </div>
    <router-view></router-view>
</template>

<script>
    export default {
        data() {
            return {
                //响应式布局配置1
                screenWidth: document.body.clientWidth
            }
        },
        mounted() {
            //响应式布局配置2
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        },
        watch: {
            //响应式布局配置3
            screenWidth(val) {
                // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                if (!this.timer) {
                    // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function() {
                        // 打印screenWidth变化的值
                        console.log(that.screenWidth)
                        that.timer = false
                    }, 400)
                }
            }
        }
    }
</script>



<style lang="scss">
    @import "./assets/Icons/winAction/iconfont.css";
    /*响应式布局配置4 */
    
    @import "./styles/global.scss";
    * {
        padding: 0;
        margin: 0;
        right: 0;
        -webkit-font-smoothing: antialiased;
        /* 对字体进行抗锯齿渲染   可以使字体看起来会更清晰舒服 它仅适用于Mac OS X / macOS。 */
        -moz-osx-font-smoothing: grayscale;
    }
    
    .win_action_form {
        position: fixed;
        width: 7.5rem;
        height: 2rem;
        /* 靠近最右边 */
        right: 0;
        top: 0;
        >ul {
            height: 2rem;
            display: -webkit-flex;
            /* Safari */
            display: flex;
            opacity: 0;
            /* flex布局 */
            list-style: none;
            &:hover {
                opacity: 1;
            }
            >li {
                height: 2rem;
                line-height: 2rem;
                text-align: center;
                width: 2.5rem;
                opacity: 0.5;
                -webkit-app-region: no-drag;
                &:hover {
                    background-color: gainsboro;
                    color: white;
                    opacity: 1;
                }
            }
        }
    }
    
    html {
        height: 100%;
        width: 100%;
        -webkit-app-region: no-drag;
        >body {
            width: 100%;
            height: 100%;
            -webkit-app-region: no-drag;
            overflow: hidden;
            #app {
                margin: 0.5% 0.5%;
                width: 99%;
                height: 99%;
                overflow: hidden;
                -webkit-app-region: drag;
            }
            /* 功能: 防止内部其他组件不可点击 按钮。标签, 输入等不可拖拽 button,*/
            a,
            input,
            textarea {
                -webkit-app-region: no-drag;
            }
            /* 功能:防止内部其他组件不可点击,直接添加该样式 */
            .noDrag {
                -webkit-app-region: no-drag;
            }
        }
    }
</style>